<template>
  <div class="input-comb">
    <slot name="before"></slot>
    <el-form-item v-if="fieldList.includes('name')" prop="name" label="受试者:">
      <el-input v-model="_inputForm.name" placeholder="请输入" @keyup.enter="submit" />
    </el-form-item>
    <el-form-item v-if="fieldList.includes('sic')" prop="sic" label="受试者:">
      <el-input v-model="_inputForm.sic" placeholder="请输入" @keyup.enter="submit" />
    </el-form-item>
    <el-form-item v-if="fieldList.includes('assessName')" prop="assessName" label="阅片人:">
      <el-input v-model="_inputForm.assessName" placeholder="请输入" @keyup.enter="submit" />
    </el-form-item>
    <el-form-item v-if="fieldList.includes('pid')" prop="pid" label="项目:">
      <el-select
        v-model="_inputForm.pid"
        placeholder="请选择"
        clearable
        filterable
        @change="submit"
      >
        <el-option
          v-for="item in projectOptions"
          :key="item.pid"
          :label="item.name"
          :value="item.pid"
        />
      </el-select>
    </el-form-item>
    <el-form-item v-if="fieldList.includes('clientId')" prop="clientId" label="研究中心:">
      <el-select
        v-model="_inputForm.clientId"
        placeholder="请选择"
        clearable
        filterable
        @change="submit"
      >
        <el-option
          v-for="item in clientOrgOptions"
          :key="item.oid"
          :label="item.name"
          :value="item.oid"
        />
      </el-select>
    </el-form-item>
    <slot name="behind"></slot>
  </div>
</template>

<script lang="ts">
export default defineComponent({
  name: 'InputComb',
})
</script>

<script lang="ts" setup>
import { computed, defineComponent, defineEmits, defineProps, PropType } from 'vue'

import IBaseObj from '#/index'

const props = defineProps({
  inputForm: {
    type: Object as PropType<IBaseObj>,
    default: () => {},
  },
  // 根据这个参数来控制输入框、下拉框显隐
  fieldList: {
    type: Array as PropType<string[]>,
    default: () => [],
  },
  clientOrgOptions: {
    type: Array as PropType<IBaseObj[]>,
    default: () => [],
  },
  projectOptions: {
    type: Array as PropType<IBaseObj[]>,
    default: () => [],
  },
})

const emit = defineEmits(['update:input-form', 'onSubmit'])

const _inputForm = computed({
  get: () => props.inputForm,
  set: (val) => {
    emit('update:input-form', val)
  },
})

const submit = () => {
  const params: IBaseObj = {}
  for (let i = 0, field = ''; i < props.fieldList.length; i++) {
    field = props.fieldList[i]
    params[field] = _inputForm.value[field]
  }
  emit('onSubmit', params)
}
</script>

<style lang="scss" scoped>
.input-comb {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
</style>
